<!--
*** Created by zhumin on 2023/09/12.***
*** Description: "总日程"
-->
<template>
  <div>
    <common @getGroupData="getGroupData"></common>
    <div :class="['component-style', 'overview']">
      <el-table :data="scheduelList" style="width: 100%" :show-header="false">
        <el-table-column width="220px">
          <template slot-scope="scope">
            <div class="date date1">
              <div class="date-title date-title1" style="margin-bottom:20px">
                {{ scope.row.title }}
              </div>
              <div class="date-icon">
                <i class="el-icon-date"></i>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" width="auto">
          <template slot-scope="scope">
            <div class="date-cell" @click="goDateRoute(scope.row.date1)">{{ scope.row.date1 }}</div>
            <div v-if="activeGroup !== 'public'">
              <img src="@/assets/img/mascot2.png" alt="" width="40px" height="45px" />
            </div>
            <div class="date-cell" style="margin-top:10px;color:#1890ff" v-else>
              {{ getDateMedalNum(scope.row.date1) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="day2" align="center" width="auto">
          <template slot-scope="scope">
            <div class="date-cell" @click="goDateRoute(scope.row.date2)">{{ scope.row.date2 }}</div>
            <div class="date-cell" style="margin-top:10px;color:#1890ff">
              {{ getDateMedalNum(scope.row.date2) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="day3" align="center" width="auto">
          <template slot-scope="scope">
            <div class="date-cell" @click="goDateRoute(scope.row.date3)">{{ scope.row.date3 }}</div>
            <div class="date-cell" style="margin-top:10px;color:#1890ff">
              {{ getDateMedalNum(scope.row.date3) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="day4" align="center" width="auto">
          <template slot-scope="scope">
            <div class="date-cell" @click="goDateRoute(scope.row.date4)">{{ scope.row.date4 }}</div>
            <div v-if="activeGroup === 'perform'">
              <img src="@/assets/img/mascot2.png" alt="" width="40px" height="45px" />
            </div>
            <div v-else>
              <div class="date-cell" style="margin-top:10px;color:#1890ff">
                {{ getDateMedalNum(scope.row.date4) }}
              </div>
            </div>
          </template>
        </el-table-column>
        <template v-if="activeGroup === 'intelligence' || activeGroup === 'public'">
          <el-table-column label="day5" align="center" width="auto">
            <template slot-scope="scope">
              <div class="date-cell" @click="goDateRoute(scope.row.date5)">
                {{ scope.row.date5 }}
              </div>
              <div class="date-cell" style="margin-top:10px;color:#1890ff">
                {{ getDateMedalNum(scope.row.date5) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="day6" align="center" width="auto">
            <template slot-scope="scope">
              <div class="date-cell" @click="goDateRoute(scope.row.date6)">
                {{ scope.row.date6 }}
              </div>
              <div class="date-cell" style="margin-top:10px;color:#1890ff">
                {{ getDateMedalNum(scope.row.date6) }}
              </div>
            </template>
          </el-table-column>
        </template>
        <template v-if="activeGroup === 'intelligence'">
          <el-table-column label="day6" align="center" width="auto">
            <template slot-scope="scope">
              <div class="date-cell" @click="goDateRoute(scope.row.date7)">
                {{ scope.row.date7 }}
              </div>
              <div class="date-cell" style="margin-top:10px;color:#1890ff">
                {{ getDateMedalNum(scope.row.date7) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="day6" align="center" width="auto">
            <template slot-scope="scope">
              <div class="date-cell" @click="goDateRoute(scope.row.date8)">
                {{ scope.row.date8 }}
              </div>
              <div class="date-cell" style="margin-top:10px;color:#1890ff">
                {{ getDateMedalNum(scope.row.date8) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="day6" align="center" width="auto">
            <template slot-scope="scope">
              <div class="date-cell" @click="goDateRoute(scope.row.date9)">
                {{ scope.row.date9 }}
              </div>
              <div class="date-cell" style="margin-top:10px;color:#1890ff">
                {{ getDateMedalNum(scope.row.date9) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="day6" align="center" width="auto">
            <template slot-scope="scope">
              <div class="date-cell" @click="goDateRoute(scope.row.date10)">
                {{ scope.row.date10 }}
              </div>
              <div class="date-cell" style="margin-top:10px;color:#1890ff">
                {{ getDateMedalNum(scope.row.date10) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="day6" align="center" width="auto">
            <template slot-scope="scope">
              <div class="date-cell" @click="goDateRoute(scope.row.date11)">
                {{ scope.row.date11 }}
              </div>
              <div class="date-cell" style="margin-top:10px;color:#1890ff">
                {{ getDateMedalNum(scope.row.date11) }}
              </div>
              <!-- <div>
                <img src="@/assets/img/mascot2.png" alt="" width="40px" height="45px" />
              </div> -->
            </template>
          </el-table-column>
        </template>
        <el-table-column width="140px"> </el-table-column>
      </el-table>

      <div class="item-scheduel">
        <el-table :data="itemList" style="width: 100%" :show-header="false">
          <el-table-column width="220px">
            <template slot-scope="scope">
              <div class="date" @click="goRoute(scope.row.title)">
                <div class="date-title">{{ scope.row.title }}</div>
                <div :class="itemLogo(scope.row.title)"></div>
              </div>
            </template>
          </el-table-column>
          <template>
            <el-table-column align="center" v-for="(item, index) in tableHeader" width="auto">
              <template slot-scope="scope">
                <div
                  v-if="item.prop !== '10-26' && activeGroup === 'public'"
                  :class="[
                    'date-cell',
                    scope.row[item.prop] === '0'
                      ? 'scheduel'
                      : scope.row[item.prop] !== ''
                      ? 'certificate'
                      : ''
                  ]"
                  @click="goRoute(scope.row.title, index)"
                ></div>
                <div
                  v-else
                  :class="[
                    'date-cell',
                    scope.row[item.prop] === '0'
                      ? 'scheduel'
                      : scope.row[item.prop] !== ''
                      ? 'medal'
                      : ''
                  ]"
                  @click="goRoute(scope.row.title, index)"
                ></div>
                <div class="date-cell" style="margin-top:10px">
                  {{
                    scope.row[item.prop] === '' || scope.row[item.prop] === '0'
                      ? ''
                      : scope.row[item.prop]
                  }}
                </div>
              </template>
            </el-table-column>
          </template>
          <el-table-column align="left" width="140px">
            <template slot-scope="scope">
              <div :class="['date-cell', 'date-venue-title']">比赛场馆</div>
              <div class="date-venue">
                {{ scope.row.date12 }}
              </div>
              <div class="date-venue">
                {{ scope.row.date13 }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import Util from '@/assets/js/util'
import Storage from '@/assets/js/storage'
export default {
  created() {
    this.activeGroup = Storage.get('activeGroup') || 'intelligence'
    this.getDailyGoldData()
  },
  mounted() {},
  data() {
    return {
      logo: require('@/assets/img/logo2.jpg'),
      tableHeader: [
        { prop: '10-25' },
        { prop: '10-26' },
        { prop: '10-27' },
        { prop: '10-28' },
        { prop: '10-29' },
        { prop: '10-30' },
        { prop: '10-31' },
        { prop: '11-01' },
        { prop: '11-02' },
        { prop: '11-03' },
        { prop: '11-04' }
      ],
      activeGroup: 'intelligence',
      scheduelList: [
        {
          title: '日期',
          subTitle: 'Date',
          date1: '10.25',
          date2: '10.26',
          date3: '10.27',
          date4: '10.28',
          date5: '10.29',
          date6: '10.30',
          date7: '10.31',
          date8: '11.01',
          date9: '11.02',
          date10: '11.03',
          date11: '11.04',
          date12: '比赛场馆'
        }
      ],
      itemList: [],
      dateGoldNum: []
    }
  },
  watch: {},
  computed: {
    ...mapState({
      itemAllList: state => state.schedule.itemAllList,
      dailyGoldData: state => state.schedule.dailyGoldData
    })
  },
  filters: {},
  components: {},
  methods: {
    getDateMedalNum(date) {
      let currentDate = date.replace('.', '-')
      for (const item of this.dateGoldNum) {
        if (currentDate === item.Date) {
          return item.PassGold + '/' + item.Gold
        }
      }
    },
    getTotalScheduleList(data) {
      this.$store
        .dispatch('getTotalScheduleList')
        .then(_ => {
          if (data === 'perform') {
            this.tableHeader = [
              { prop: '10-17' },
              { prop: '10-18' },
              { prop: '10-19' },
              { prop: '10-20' }
            ]
            this.scheduelList = [
              {
                title: '日期',
                subTitle: 'Date',
                date1: '10.17',
                date2: '10.18',
                date3: '10.19',
                date4: '10.20',
                data5: '比赛场馆'
              }
            ]
            this.itemAllList.perform.forEach(item => {
              this.itemList.push(item)
            })
          } else if (data === 'intelligence') {
            this.tableHeader = [
              { prop: '10-25' },
              { prop: '10-26' },
              { prop: '10-27' },
              { prop: '10-28' },
              { prop: '10-29' },
              { prop: '10-30' },
              { prop: '10-31' },
              { prop: '11-01' },
              { prop: '11-02' },
              { prop: '11-03' },
              { prop: '11-04' }
            ]
            this.itemAllList.intelligence.forEach(item => {
              this.itemList.push(item)
            })
            this.scheduelList = [
              {
                title: '日期',
                subTitle: 'Date',
                date1: '10.25',
                date2: '10.26',
                date3: '10.27',
                date4: '10.28',
                date5: '10.29',
                date6: '10.30',
                date7: '10.31',
                date8: '11.01',
                date9: '11.02',
                date10: '11.03',
                date11: '11.04',
                date12: '比赛场馆'
              }
            ]
          } else if (data === 'public') {
            this.tableHeader = [
              { prop: '10-26' },
              { prop: '10-30' },
              { prop: '10-31' },
              { prop: '11-01' },
              { prop: '11-02' },
              { prop: '11-03' }
            ]
            this.itemAllList.public.forEach(item => {
              this.itemList.push(item)
            })
            this.scheduelList = [
              {
                title: '日期',
                subTitle: 'Date',
                date1: '10.26',
                date2: '10.30',
                date3: '10.31',
                date4: '11.01',
                date5: '11.02',
                date6: '11.03',
                date12: '比赛场馆'
              }
            ]
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    itemLogo(itemName) {
      switch (itemName) {
        case '围棋':
          return 'date-sub-GO'
        case '桥牌':
          return 'date-sub-BR'
        case '象棋':
          return 'date-sub-CC'
        case '国际象棋':
          return 'date-sub-CH'
        case '国际跳棋':
          return 'date-sub-DR'
        case '五子棋':
          return 'date-sub-GB'
        case '掼牌（掼蛋）':
          return ''
        default:
          return
      }
    },
    goRoute(itemName, dateTitle = null) {
      var activeItemDate = 'ALL'
      if (dateTitle) {
        activeItemDate = this.tableHeader[dateTitle].prop.replace('-', '/')
      }
      this.$router.push({
        name: 'itemDetail',
        query: {
          activeItemName: itemName,
          activeItemDate: activeItemDate
        }
      })
    },
    goDateRoute(dateTitle) {
      var dateActive = 26
      var tabActive = 'October'
      if (dateTitle !== '10.25') {
        if (dateTitle) {
          tabActive = dateTitle.split('.')[0] === '10' ? 'October' : 'November'
          dateActive = parseInt(dateTitle.split('.')[1])
        }
        this.$router.push({
          name: 'daily',
          query: {
            dateActive: dateActive,
            tabActive: tabActive
          }
        })
      }
    },
    getGroupData(data) {
      this.activeGroup = data
      this.dateGoldNum = []
      this.dateGoldNum = this.dailyGoldData[this.activeGroup]
      this.itemList = []
      this.getTotalScheduleList(data)
    },
    getDailyGoldData() {
      this.$store
        .dispatch('getDailyGoldData')
        .then(_ => {
          this.dateGoldNum = this.dailyGoldData[this.activeGroup]
          this.getGroupData(this.activeGroup)
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>
<style scoped lang="scss">
@import '@/assets/scss/overview.scss';
</style>
